{% extends "base.html" %}


{% block head %}
  {{ super() }}
  <link href="/stylesheets/datepicker.css" rel="stylesheet" media="screen"/>
  <script type="text/javascript" src="/src/bootstrap-datepicker.js"></script>


{% endblock head%}

{% block title %}
Producto
{% endblock %}





{% block content %}

<div class="container">
  <div class="row-fluid" id="content-bar">
    <div class="row-fluid">
      <div class="alert">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>El boton reserve se activara cuando la fecha introducida este disponible</strong>
      </div>
    </div>

    <div class="row-fluid">
      
      <div class="page-header">
	<h1>{{ product.nm }}</h1>
      </div>
      
      <ul class="breadcrumb">
	<li><a href="/">Home</a><span class="divider">/</span></li>
	<li><a href="/products">Products</a><span class="divider">/</span></li>
	<li class="active">{{ product.nm }}</li>
      </ul>
      
      <div class="row-fluid">
	<div class="span2">
	  <img class="img-polaroid" src="/product/{{product.nm}}/img"/>
	</div>
	<div class="span6">
    {% if user %}
	  <form class='form-inline' method='POST' action={{ product.nm }} id='form_new_reserve'>
	    <input type="text" id="form_timedate" class="datepicker" data-date-format="dd-mm-yyyy" name="date"/>
	    <input type="hidden" name="name" value="{{product.nm}}"/>
	    <select name="time" id="form_timedate">
	      {% for element in journey %}
	      <option value={{ element.hour }}:00:00>{{ element.hour }}:00</option>
	      {% endfor %}
	    </select>
	    <button id="button_new_reserve" class="btn" disabled="disabled" type="submit">Reserve</button>
	  </form>
    {% endif %}
	</div>
      </div>
      <div class="row-fluid">
	<div class="span3">
	  <p>{{product.desc}}</p>
	</div>
      </div>
    </div>
  </div>
</div>

<script>
  {# comprueba disponibilidad de la reserva cada vez
     que se modifica el formulario #}

  function check_reserve(){
    $.post('/check',$('#form_new_reserve').serialize())
    .done(function(data){
      if(data == 0)
        $('#button_new_reserve').removeAttr("disabled");
      else
        $('#button_new_reserve').attr("disabled","disabled");
    });
  }

  $(document).ready(function(){
    $('.datepicker').datepicker().on('changeDate',function(ev){
      check_reserve();
    }).data('datepicker');

    $("select").change(function(){
      check_reserve();
    })
    .change();
  });
</script>
{% endblock content %}



